<template>
  <div>
    <el-tabs v-model="query.treatmentStates" @tab-click="crud.toQuery" class="topTab">
      <el-tab-pane v-for="item in options.treatmentStates" :label="item.label"></el-tab-pane>
    </el-tabs>

    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <div class="head-container-whole-execution">
          <!-- <el-select v-model="query.patientType" class="filter-item" placeholder="就诊类型" clearable
            @change="crud.toQuery">
            <el-option v-for="item in options.patientType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
          <!-- <el-select v-model="query.treatmentStates" class="filter-item" placeholder="完成状态" clearable
          @change="crud.toQuery">
          <el-option v-for="item in options.treatmentStates" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select> -->
          <!-- <el-select v-model="query.exeStates" class="filter-item" placeholder="执行状态" clearable @change="crud.toQuery">
            <el-option v-for="item in options.exeStates" :key="item.value" :label="item.label" :value="item.value" />
          </el-select> -->
          <!-- <el-select v-model="query.applyDepartmentCode" class="filter-item" placeholder="申请科室" filterable
            default-first-option remote :remote-method="getTypeList" clearable @change="crud.toQuery">
            <el-option v-for="item in options.applyDepartmentCode" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select> -->
          <!-- <el-select v-model="query.hyperbaricOxygenStates" class="filter-item" placeholder="是否高压氧治疗" clearable
            @change="crud.toQuery">
            <el-option v-for="item in options.hyperbaricOxygenStates" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select> -->
          <div class="table_title">患者列表</div>
          <div class="search-el">
            <div class="select">
              <div class="filter-item">
                <span class="appointment">预约时间：</span>
                <el-date-picker v-model="dateRange" :default-time="['00:00:00', '23:59:59']" type="daterange"
                  range-separator=":" size="small"  value-format="yyyy-MM-dd" start-placeholder="开始日期"
                  end-placeholder="结束日期" style="maxWidth: 200px" @change="dateRangeChange" />
              </div>
            </div>
            <div class="select">
              <el-input style="width: 200px" v-model="query.patientName" placeholder="姓名/床号/住院号/门诊号" size="small" class="filter-item"
                @keyup.enter.native="toQuery" />
            </div>
          </div>
          <!-- <el-checkbox v-model="myStates" class="filter-item" @change="myStatesChange">
            个人
          </el-checkbox> -->
          <div class="search-btn">
            <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="crud.refresh">
              查询
            </el-button>
          </div>
        </div>
      </div>
      <el-table ref="table" v-loading="crud.loading" :data="crud.data[crud.listName]" highlight-current-row border
        row-key="reservationId" :tree-props="{ children: 'otherReservations', hasChildren: 'hasChildren' }"
        @current-change="handleCurrentChange" @sort-change="sortChange" :cell-class-name="getCellClassName"
        :cell-style="{ 'text-align': 'center' }" :header-cell-style="{
          background: '#eef1f6',
          color: '#606266',
          textAlign: 'center',
        }">
        <!-- <el-table-column label="序号" width="60px" prop="indexNumber">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
</el-table-column> -->
        <el-table-column label="预约时间" prop="reservationTime" width="145px" sortable="custom">
          <template slot-scope="scope">
            {{
              scope.row.reservationTime
                ? moment(scope.row.reservationTime).format("YYYY年MM月DD日 HH:mm")
                : ""
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="实际执行" prop="dicName">
          <template slot-scope="scope">
            {{
              `${scope.row.exePeriod}/${scope.row.periodNum}/${scope.row.exeNum}`
            }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="执行疗程" width="50px">
          <template slot-scope="scope">
            {{
              `${scope.row.exePeriod}`
            }}
          </template>
        </el-table-column> -->
        <el-table-column label="项目名称" prop="treatmentName" width="100px" sortable="custom">
          <template slot-scope="scope">
            {{
              `${scope.row.treatmentName}`
            }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="patientName" sortable="custom" />
        <el-table-column label="就诊类型" prop="dicItemCategoryName">
          <template slot-scope="scope">
            {{
              `${scope.row.dicItemCategoryName}`
            }}
          </template>
        </el-table-column>
        <el-table-column label="疗程次数" width="80px">
          <template slot-scope="scope">
            {{
              `${scope.row.periodNum}`
            }}
          </template>
        </el-table-column>
        <el-table-column label="治疗执行次数" width="80px">
          <template slot-scope="scope">
            {{
              `${scope.row.exeNum}`
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="床号" prop="bedNum" sortable="custom" />
        <el-table-column label="住院号" prop="admissionNum" />
        <el-table-column label="门诊号" prop="outpatientNum" /> -->
        <el-table-column label="状态" prop="treatmentStates">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.treatmentStates === 0 ? 'red' : '' }">
              {{
                scope.row.treatmentStates === 0
                  ? "未完成"
                  : scope.row.treatmentStates === 1
                    ? "已完成"
                    : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="是否执行" prop="exeStates">
          <template slot-scope="scope">
            <span :style="{ color: scope.row.exeStates === 0 ? 'red' : '' }">
              {{
                scope.row.exeStates === 0
                  ? "未执行"
                  : scope.row.exeStates === 1
                    ? "已执行"
                    : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="医嘱id" width="55px">
          <template slot-scope="scope">
            {{
              `${scope.row.adviceId}`
            }}
          </template>
        </el-table-column>
        <el-table-column label="预约id" width="55px">
          <template slot-scope="scope">
            {{
              `${scope.row.reservationId}`
            }}
          </template>
        </el-table-column>
        <!-- <el-table-column v-permission="['admin', 'dic/edit']" label="操作" width="130px" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.highOxygenStates === 1">
              <el-link v-if="scope.row.arriveStates === 0" v-permission="permission.sign"
                style="margin-right: 5px; display: inline-block" size="mini" type="primary"
                @click="toSign(scope.row.reservationId)">
                签到
              </el-link>
              <span v-else>已签到 </span>
            </template>
            <el-link v-if="scope.row.exeFlag === 0" style="margin-right: 5px; display: inline-block" size="mini"
              type="primary" @click="toPay(scope.row.reservationId)">
              收费
            </el-link>
          </template>
        </el-table-column> -->
      </el-table>
      <pagination />
    </el-card>
  </div>
</template>
<script>
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import pagination from "@crud/Pagination";
import moment from "moment";
import {
  getDepartmentList,
  therapistsSign,
  therapistsPay,
} from "@/api/therapistsSite/therapistsSite";
import { Notification } from "element-ui";
import { PATIENT_TYPE_LIST } from "../enums";
const defaultForm = { type: undefined };
export default {
  name: "executionLeft",
  components: { pagination },
  cruds() {
    return CRUD({
      title: "患者列表",
      url: "admin/therapists/patient/list",
      optShow: {
        reset: false,
        add: true,
        edit: false,
        del: false,
        download: false,
        opts: true,
      },
      idField: "patientId",
      sort: undefined,
      props: {
        pageIndexKey: "page",
        pageSizeKey: "size",
      },
      query: {
        patientType: undefined,
        treatmentStates: 0,
        exeStates: undefined,
        applyDepartmentCode: undefined,
        hyperbaricOxygenStates: undefined,
        reservationTimeBegin: undefined,
        reservationTimeEnd: undefined,
        patientName: "",
        myStates: 0,
        sortField: undefined,
        sortType: undefined,
      },
    });
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  props: {
    activeRow: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      myStates: false,
      dateRange: [],
      permission: {
        sign: ["admin", "treatmentExecution/sign"],
      },
      currentRow: null,
      options: {
        patientType: PATIENT_TYPE_LIST,
        treatmentStates: [
          { label: "未完成", value: 0 },
          { label: "已完成", value: 1 },
        ],
        exeStates: [
          { label: "未执行", value: 0 },
          { label: "已执行", value: 1 },
          { label: "已完成", value: 2 },
        ],
        applyDepartmentCode: [],
        hyperbaricOxygenStates: [
          { label: "高压氧治疗", value: 1 },
          { label: "非高压氧治疗", value: 0 },
        ],
      },
    };
  },
  watch: {
    activeRow: function (val, oldVal) {
      this.currentRow = val;
      if (this.currentRow !== null) {
        this.$refs.table.setCurrentRow(val);
      };
    },
  },
  methods: {
    moment,
    myStatesChange(e) {
      this.query.myStates = e ? 1 : 0;
      this.crud.toQuery();
    },
    dateRangeChange(e) {
      if (Array.isArray(e) && e.length === 2) {
        const [reservationTimeBegin, reservationTimeEnd] = e;
        Object.assign(this.query, {
          reservationTimeBegin,
          reservationTimeEnd,
        });
        this.crud.toQuery();
      } else {
        Object.assign(this.query, {
          reservationTimeBegin: undefined,
          reservationTimeEnd: undefined,
        });
        this.crud.toQuery();
      }
    },
    toSign(e) {
      this.$confirm(`确认签到？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            therapistsSign({
              reservationId: e,
            })
              .then((res) => {
                Notification.success({
                  title: res.msg,
                });
                done();
              })
              .catch((res) => { })
              .finally(() => {
                instance.confirmButtonLoading = false;
              });
          } else {
            done();
          }
        },
      })
        .then((res) => { })
        .catch((res) => { });
    },
    toPay(e) {
      this.$confirm(`确认标记收费？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            therapistsPay({
              reservationId: e,
            })
              .then((res) => {
                Notification.success({
                  title: res.msg,
                });
                this.crud.toQuery();
                done();
              })
              .catch((res) => {
                console.log(res);
              })
              .finally(() => {
                instance.confirmButtonLoading = false;
              });
          } else {
            done();
          }
        },
      })
        .then((res) => { })
        .catch((res) => { });
    },
    handleCurrentChange(val) {
      if (val) {
        this.$emit("change", val);
      }
    },
    [CRUD.HOOK.afterRefresh](crud) {
      if (crud.data && crud.data.content && crud.data.content.length) {
        if (this.currentRow) {
          // console.log(this.currentRow, "this.111111111111111");
          const existRow = crud.data.content.find(
            (row) => row.reservationId === this.currentRow.reservationId
          );
          // console.log(this.existRow);
          if (!existRow) {
            this.$emit("change", crud.data.content[0]);
          } else {
            this.$emit("change", existRow);
          }
        } else {
          this.$emit("change", crud.data.content[0]);
        }
      }
    },
    getTypeList(e) {
      getDepartmentList({
        departmentNameOrCode: e,
        page: 1,
        size: 50,
      }).then((res) => {
        this.options.applyDepartmentCode = res.content.map((item) => {
          const { departmentName, hisDepartmentId } = item;
          return {
            label: departmentName,
            value: hisDepartmentId,
          };
        });
      });
    },
    sortChange({ prop, order }) {
      const sortFieldList = {
        reservationTime: 1,
        treatmentName: 2,
        patientName: 3,
        bedNum: 4,
      };
      const sortTypeList = {
        ascending: 1,
        descending: 2,
      };
      if (order) {
        this.query.sortType = sortTypeList[order];
        this.query.sortField = sortFieldList[prop];
      } else {
        this.query.sortType = undefined;
        this.query.sortField = undefined;
      }
      this.crud.toQuery();
    },
    getCellClassName({ row, column }) {
      const { property } = column;
      //是否高压氧
      const { highOxygenStates } = row;
      if (property === "treatmentName") {
        // console.log("sign_status " + "sign_status_" + highOxygenStates);
        return "sign_status " + "sign_status_" + highOxygenStates;
      }
    },
  },
  mounted() {
    // setTimeout(() => {
    //   console.log("exectionLeft", this.crud.data[this.crud.listName]);
    // }, 500);
    // console.log(this.currentRow, "this.currentRow11111111111111");
  }
};
</script>
<style lang="scss" scoped>
/deep/.crud-opts {
  display: inline-flex;
}

.topTab {
  width: 203%;
  margin-bottom: 0px;
}

.table_title {
  display: inline-block;
  line-height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  font-weight: bold;
  color: #303133;
  font-size: 15px;
}

.head-container-whole-execution {
  padding-bottom: 0;
  // display: flex;
  // flex-wrap: wrap;

  /deep/.filter-item {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    .appointment{
      display: inline-block;
      width: 60px;
    }
  }

  .search-el{
    display: flex;
    .select{
      margin-right: 5px;
      display: flex;
    }
  }

  .search-btn{
    margin-top: 3px;
    .btn{
      display: inline-block;
      margin-right: 5px;
    }
  }
}

.el-table {
  /deep/.sign_status::after {
    content: " ";
    display: block;
    background-color: #119909;
    width: 3px;
    position: absolute;
    right: 0;
    top: 0;
    height: calc(100% + 1px);
  }

  /deep/.sign_status_0::after {
    background-color: #02a7f0;
  }
}
</style>
